<template>
  <div>
    <ea-dialog
      v-bind="$attrs"
      v-on="$listeners"
      width="800px"
      ref="elDialog"
      :title="title"
      :type="type"
      @submit="submit"
      :steps="steps"
      :step.sync="step"
      @check-step-field="checkFields"
      @reset="$refs.form.resetFields()"
      @closed="handleClosed"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="singleData"
        label-width="110px"
      >
        <!--    step 1-->
        <div v-show="step === 0">
          <el-form-item label="考试名称" prop="examname">
            <el-input
              v-model="singleData.examname"
              clearable
              placeholder="请输入考试名"
            />
          </el-form-item>
          <el-form-item label="考试时长" prop="duration">
            <el-input-number
              v-model="singleData.duration"
              controls-position="right"
            />
            <span class="tip-text">分</span>
          </el-form-item>
          <el-form-item label="时间" prop="selectTime">
            <el-date-picker
              v-model="singleData.selectTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="考试性质" prop="examcha">
            <el-radio-group v-model="singleData.examcha">
              <!-- <el-radio :label="0">模拟考试</el-radio> -->
              <el-radio :label="1">正式考试</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="考试类型" prop="examtype">
            <el-radio-group v-model="singleData.examtype">
              <el-radio :label="0">笔试</el-radio>
              <!--              <el-radio :label="1">现场</el-radio>
              <el-radio :label="2">上机</el-radio> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="迟到禁考时间" prop="lateminute">
            <el-input-number
              v-model="singleData.lateminute"
              controls-position="right"
            />
            <span class="tip-text">分</span>
          </el-form-item>
          <el-form-item label="最短答题时间" prop="nohandin">
            <el-input-number
              v-model="singleData.nohandin"
              controls-position="right"
            />
            <span class="tip-text">分</span>
          </el-form-item>
          <el-form-item label="提前交卷时间" prop="remindmin">
            <el-input-number
              v-model="singleData.remindmin"
              controls-position="right"
            />
            <span class="tip-text">分</span>
          </el-form-item>
        </div>

        <!--    step 2-->
        <div v-show="step === 1">
          <el-form-item label="选择试卷" prop="paperid">
            <el-select v-model="singleData.paperid" placeholder="请选择试卷">
              <el-option
                v-for="paper in paperList"
                :key="paper.paperid"
                :label="paper.papername"
                :value="paper.paperid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="题目顺序随机" prop="isquerandomorder">
            <el-switch
              v-model="singleData.isquerandomorder"
              active-color="#13ce66"
              :active-value="true"
              :inactive-value="false"
            />
          </el-form-item>
          <el-form-item label="题目选项随机" prop="isqueoprandomorder">
            <el-switch
              v-model="singleData.isqueoprandomorder"
              active-color="#13ce66"
              :active-value="true"
              :inactive-value="false"
            />
          </el-form-item>
        </div>
        <!--    step 3-->
        <div v-show="step === 2">
          <el-form-item label="选择学生" prop="studentlist">
            <el-button @click="selectStuDialog = true">选择学生</el-button>
            <p>已选 ( {{ singleData.studentlist.length }}人 )</p>
          </el-form-item>
        </div>
        <!--    step 4-->
        <div v-show="step === 3">
          <el-form-item label="通知标题" prop="noticeTitle">
            <el-input
              v-model="singleData.noticeTitle"
              maxlength="50"
              show-word-limit
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item label="通知内容" prop="noticeContent">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="singleData.noticeContent"
              maxlength="100"
              :rows="3"
              show-word-limit
            />
          </el-form-item>
        </div>
      </el-form>
    </ea-dialog>
    <select-stu
      :stu-list.sync="singleData.studentlist"
      :show.sync="selectStuDialog"
      api-url="/sys/examManage/getStudentByInfo"
      :api-params="queryStuParams"
      :column="stuTbColumn"
    >
      <template v-slot:table-filter>
        <school-dept-class-selection
          show-school
          show-dept
          show-class
          :school-code.sync="queryStuParams.schoolCode"
          :dept-code.sync="queryStuParams.deptCode"
          :class-code.sync="queryStuParams.classCode"
        ></school-dept-class-selection>
        <el-input
          v-model="queryStuParams.username"
          placeholder="请输入学生姓名"
        ></el-input>
      </template>
    </select-stu>
  </div>
</template>

<script>
import editAndAdd from "../../../mixins/business/editAndAdd";
import filters from "@/filter/index";
import SelectStu from "../../component/SelectStu";
import SchoolDeptClassSelection from "@/views/component/SchoolDeptClassSelection";

export default {
  name: "EaExamination",
  components: { SchoolDeptClassSelection, SelectStu },
  mixins: [editAndAdd],
  data() {
    return {
      moduleName: "考试",
      singleData: {
        duration: 90,
        endtime: "",
        examcha: 1,
        examid: null,
        examname: "",
        examtype: 0,
        isDefaultFormat: false,
        isqueoprandomorder: false,
        isquerandomorder: false,
        lateminute: 15,
        nohandin: 30,
        noticeContent: "",
        noticeTitle: "",
        paperid: null,
        remindmin: 30,
        sceniclist: "",
        shortanswerlist: "",
        starttime: "",
        studentlist: [],
        selectTime: []
      },
      paperList: [],
      steps: ["填写基本信息", "设置试卷/景点", "选择学生", "发布考试"],
      step: 0,
      props: {
        lazy: true,
        multiple: true,
        lazyLoad: this.lazyLoad,
        label: "name"
      },
      rules: {
        examname: { required: true, message: "考试名称不能为空！" },
        duration: { required: true, message: "考试时长不能为空！" },
        selectTime: { required: true, message: "请选择考试时间！" },
        lateminute: { required: true, message: "请设置迟到禁考时间！" },
        nohandin: { required: true, message: "请设置最短答题时间！" },
        remindmin: { required: true, message: "请选择提前交卷时间！" },
        paperid: { required: true, message: "请选择考试试卷！" },
        studentlist: { required: true, message: "请添加考试学生！" },
        noticeTitle: { required: true, message: "请输入通知标题！" },
        noticeContent: { required: true, message: "请输入通知内容！" }
      },
      stepRule: [
        [
          "examname",
          "duration",
          "selectTime",
          "lateminute",
          "nohandin",
          "remindmin"
        ],
        ["paperid"],
        ["studentlist"],
        ["noticeTitle", "noticeContent"]
      ],
      selectStuDialog: false,
      dept: [],
      classes: [],
      queryStuParams: {
        classCode: "",
        schoolCode: "",
        deptCode: "",
        stuName: ""
      },
      stuTbColumn: [
        {
          prop: "usercode",
          label: "用户名"
        },
        {
          prop: "username",
          label: "姓名"
        },
        {
          prop: "organizename",
          label: "班级"
        },
        {
          prop: "deptName",
          label: "院系"
        },
        {
          prop: "schoolName",
          label: "学校"
        }
      ]
    };
  },
  watch: {
    "singleData.examcha": {
      immediate: true,
      handler(n) {
        this.api.getPaperList(n).then(res => {
          this.paperList = res;
        });
      }
    },
    step(n) {
      if (n === 3 && this.type === "add") {
        this.singleData.noticeTitle = this.singleData.examname + " 通知";
        this.singleData.noticeContent = `请于: ${filters.formatterDate(
          this.singleData.starttime
        )} 至 ${filters.formatterDate(this.singleData.endtime)} 参加考试： "${
          this.singleData.examname
        }"`;
      }
    }
  },
  created() {
    this.api.getDeptOfUser().then(res => {
      this.dept = res;
    });
  },
  methods: {
    lazyLoad(node, resolve) {
      const { level } = node;
      switch (level) {
        case 0:
          this.api.getDeptOfUser().then(resolve);
          break;
        case 1:
          this.api.getClassOfDept(node.value).then(resolve);
          break;
        case 2:
          this.api.getStuOfClass(node.value).then(resolve);
          break;
        default:
          resolve([]);
      }
    },
    handle() {
      const formData = this.deepClone(this.singleData);
      formData.studentlist = this.singleData.studentlist.join(",");
      return this.axios.post("/sys/examManage/addAndUpdateExam", formData);
    },
    handleClosed() {
      this.step = 0;
      this.singleData.selectTime.splice(0);
      this.end();
    },
    onDeptChange(e) {
      this.apiSetting.collegeValue = e;
      this.apiSetting.classValue = "";
      this.classes.splice(0);
      if (e) {
        this.api.getClassOfDept(e).then(res => {
          this.classes = res;
        });
      }
    }
  }
};
</script>

<style scoped>
.tip-text {
  color: darkgray;
  margin-left: 10px;
}

.el-form {
  width: 550px;
  margin: 0 auto;
}
</style>
